<template>
  <div>
    <slot name="top"></slot>
    <div class="flex flex-col">
      <div class="overturn-box " :class="active==='a'?'block':'h-0'" :style="styleA">
        <slot name="a"></slot>
      </div>
      <div class="overturn-box  " :class="active==='b'?'block':'h-0'" :style="styleB">
        <slot name="b"></slot>
      </div>
    </div>
    <slot name="bottom"></slot>
  </div>
</template>

<script setup lang="ts">
import {ref} from "vue";

const active = ref('a')
const styleA = ref('transform:rotateY(0deg)')
const styleB = ref('transform:rotateY(-180deg)')

const handleSwitch =()=>{
  if(active.value==='a'){
    showB()
  }else{
    showA()
  }
}


const showA = () => {
  active.value = 'a'
  styleA.value = 'transform:rotateY(0deg)'
  styleB.value = 'transform:rotateY(-180deg)'
}
const showB = () => {
  active.value = 'b'
  styleA.value = 'transform:rotateY(180deg)'
  styleB.value = 'transform:rotateY(0deg)'

}
const doSwitch = () => {
  handleSwitch()
}
defineExpose({
  doSwitch,
})
</script>

<style scoped>
.overturn-box {
  transition: all 0.5s;
  backface-visibility: hidden;
  overflow: hidden;
}
</style>